<template>
    <!-- 面板内容 -->
    <div class="content-center">
        <div class="centent-inner">
            <div class="centent-title">
                <span>首页</span>
            </div>
            <ul class="ul-box">
                <li class="ul-box-li" v-for="(item,index) in projectBrief" :key="index" @click="messageIndex">
                    <div class="div-number">
                        <div class="div-top">
                            <img src="../../assets/lg.png"/>
                            <p>{{index > 10? index : '0' + (index+1) }}</p>
                        </div>
                        <div class="div-title">
                            <p>{{ item.projectName }}</p>
                        </div>
                    </div>
                    <div class="div-role">
                        <div class="div-role-left">
                            <img src="../../assets/role2.png"/>
                            <p>项目角色：{{ item.role }}</p>
                        </div>
                        <!--<div class="div-state div-state-colActive">-->
                        <div :class="classShow(item.projectAct)">
                            <p>{{ stateShow(item.projectAct) }}</p>
                        </div>
                    </div>
                    <div class="div-content">{{ item.projectState }}</div>
                    <div class="div-time">
                        <ul>
                            <li>{{ item.startTime }}</li>
                            <li>项目启动时间</li>
                        </ul>
                        <ul>
                            <li>{{ item.endTime }}</li>
                            <li>项目完成时间</li>
                        </ul>
                    </div>
                </li>
            </ul>
        </div>
        <div class="btn-refresh">
            <button>刷新审计项目</button>
        </div>
        <div class="bottom-bottom">

        </div>

    </div>
</template>

<script>
    // import { getService  } from "@/api";
    // import Bus from "../../utils/eventBus.js";
    import axios from "axios";
    //import Tree from "@/components/Tree";
    import {parseTime} from "@/utils/index.js";

    export default {
        components: {
            //Tree
        },
        data() {
            return {
                // 当前时间
                //nowTime: "",
                projectBrief: [
                    {
                        projectName: "2019年部分省市重点金融市场产品专项审计",
                        projectState: "通过对部分省市重点金融市场产品开展专项审计，了解金融市场业务发展情况，揭示重点金融市场管理中的内控缺陷和风险事项。",
                        projectAct: "1",
                        role: "主审",
                        roleImg: "../../assets/role2.png",
                        startTime: "2018/03/22",
                        endTime: "2018/06/22"
                    },
                    {
                        projectName: "2019年北京市部分小企业信贷业务审计",
                        projectState: "通过对北京市部分小企业的信贷情况开展专项审计，通过了解小型企业的经营管理情况，揭示其在信贷业务的风险事项和内控缺陷。",
                        projectAct: "2",
                        role: "成员",
                        roleImg: "../../assets/role2.png",
                        startTime: "2018/03/22",
                        endTime: "2018/06/22"
                    },
                    {
                        projectName: "2019年北京市部分小企业信贷业务审计",
                        projectState: "通过对北京市部分小企业的信贷情况开展专项审计，通过了解小型企业的经营管理情况，揭示其在信贷业务的风险事项和内控缺陷。",
                        projectAct: "1",
                        role: "成员",
                        roleImg: "../../assets/role2.png",
                        startTime: "2018/03/22",
                        endTime: "2018/06/22"
                    },
                    {
                        projectName: "2019年北京市部分小企业信贷业务审计",
                        projectState: "通过对北京市部分小企业的信贷情况开展专项审计，通过了解小型企业的经营管理情况，揭示其在信贷业务的风险事项和内控缺陷。",
                        projectAct: "2",
                        role: "成员",
                        roleImg: "../../assets/role2.png",
                        startTime: "2018/03/22",
                        endTime: "2018/06/22"
                    },
                    {
                        projectName: "2019年北京市部分小企业信贷业务审计",
                        projectState: "通过对北京市部分小企业的信贷情况开展专项审计，通过了解小型企业的经营管理情况，揭示其在信贷业务的风险事项和内控缺陷。",
                        projectAct: "2",
                        role: "成员",
                        roleImg: "../../assets/role2.png",
                        startTime: "2018/03/22",
                        endTime: "2018/06/22"
                    }
                ]
            };
        },
        computed: {
            /*selected() {
              return this.$store.getters.selected;
            }*/
        },
        mounted() {
            //this.nowTime = parseTime(new Date());
        },
        created() {
            //  this.getService();
            //  axios.get('https://www.easy-mock.com/mock/5d4d34a6e5b75c7612162f6d/system/').then(res=>{
            //    console.log(res)
            //  })
        },
        methods: {
            // 获取列表
            /*async getService(k = {}) {
             const res = await getService(k);
             console.log(res)
             // if (res.status == 200) {
             //     console.log(res)

             // }
           },*/
            messageIndex() {
                this.$router.push({
                    path: "/homePage/homeMessage"
                })
            },
            classShow(val) {
                return val == 1 ? 'div-state div-state-colActive' : 'div-state div-state-colOngoing'
            },
            stateShow(val) {
                return val == 1 ? "已完成" : "进行中"
            }
        }
    };
</script>

<style lang="less" scoped>
    .content-center{
        padding: 20px;
        .centent-inner{
            height: calc(100% - 56px);
            overflow-y:auto;
            padding: 0;

        }
    }
    .btn-refresh{
        position: relative;
        height: 56px;
        padding-top:20px;
        button{
            margin: 0 auto;
            width: 360px;
            line-height: 38px;
            background: #6C8AB6;
            border-radius: 4px;
            border: 1px solid #6C8AB6;
            color: #FFFFFF;
            font-size: 14px;
            display: block;
        }
    }
    .bottom-bottom{
        height: 50px;
        width: 100%;
    }

    .ul-box {
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        overflow: hidden;
        padding: 20px;

        .ul-box-li {
            width: 22.5%;
            height: 389px;
            border: 0.96px solid #D2D2D2;
            border-radius: 4px;
            /*margin-right: 3.3%;*/
            margin-bottom: 20px;
            cursor: pointer;

            .div-number {
                width: 100%;
                height: 44%;
                background: #6C8AB6;
                /*border-radius: 7.2px 7.2px 0 0;*/
                border-radius: 4px 4px 0 0;

                .div-top {
                    height: 50%;
                    padding: 10px 20px;
                    display: flex;
                    justify-content: space-between;
                    align-items: baseline;

                    img {
                        height: 12.5%;
                        margin-top: 1%;
                    }

                    p {
                        font-size: 19px;
                        color: #FFFFFF;
                        opacity: 0.5;
                    }
                }

                .div-title {
                    height: 50%;
                    background-image: linear-gradient(270deg, rgba(35, 59, 93, 0.00) 0%, #233B5D 100%);
                    padding: 10px 20px;

                    p {
                        font-size: 20px;
                        color: #FFFFFF;
                        line-height: 29px;
                    }
                }
            }

            .div-role {
                height: 28px;
                margin: 20px 0 10px 20px;
                line-height: 28px;
                display: flex;
                justify-content: space-between;

                .div-role-left {
                    width: 80%;
                    height: 100%;
                    display: flex;
                    justify-content: flex-start;

                    img {
                        height: 100%;
                    }

                    p {
                        font-size: 14px;
                        color: #333333;
                        font-weight: 700;
                        margin-left: 3%;
                    }
                }

                .div-state {
                    width: 20%;
                    border-radius: 100px 0 0 100px;

                    p {
                        color: #FFFFFF;
                        text-align: center;
                    }
                }

                .div-state-colActive {
                    background: #319167;
                }

                .div-state-colOngoing {
                    background: #EEBB13;
                }
            }

            .div-content {
                height: 22.5%;
                padding: 0 20px;
                line-height: 22px;
                font-size: 14px;
                color: #666666;
            }

            .div-time {
                height: 10%;
                padding: 0 50px;
                margin-top: 15px;
                display: flex;
                justify-content: space-between;

                ul {
                    text-align: center;

                    li {
                        font-size: 12px;
                        color: #999999;
                    }

                    & > li:first-child {
                        font-size: 15px;
                        color: #333333;
                        margin-bottom: 4px;
                    }
                }
            }
        }
    }

</style>